<template>
    <div class="home">
        <h1>首页</h1>
        <h2 v-if="isShow" style="color: firebrick;">当前计数:{{ count }}</h2>
        <button class="count" @click="addCount">count+1</button>
        <button class="isShow" @click="changeIsShow">显示/隐藏</button>
        <ul>
            <li v-for="(list, index) in list" :key="index">
                {{ index }} - {{ list }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted,watch} from 'vue'
//初始化
const count = ref(0)
const isShow = ref(true)
//for遍历
const list = ['Vue指令', 'ref响应式', '路由跳转']
//count自增
function addCount(){
    count.value += 1;
}
//改变isShow的值
function changeIsShow(){
    isShow.value = !isShow.value
}
//页面挂载
onMounted(()=>{
    console.log('页面挂载完毕');
});
//watch监听
watch([count], ([newCount], [oldCount]) => {
    if (newCount !== oldCount) {
      console.log(`计数变化：旧值->${oldCount} , 新值->${newCount}`)
    }
})
</script>

<style scoped>
    .home {
        width: 100%;
        padding: 40px 20px;
        background-color: azure;
        text-align: center;
    }
    .count {
        background-color: dodgerblue;
        padding: 20px;
        border: 1px solid rgb(74, 102, 211);
        border-radius: 15px;
        margin-right: 50px;
    }
    .isShow {
        background-color: palevioletred;
        padding: 18.5px;
        border: 1px solid rgb(163, 74, 211);
        border-radius: 15px;
        margin-left: 50px;
    }
</style>